<!DOCTYPE html>
<html
        layout:decorator="component/mainLayout"
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        lang="en" xmlns:layout="http://www.w3.org/1999/xhtml">
<div layout:fragment="contentCenter" class="body">
    <div class="mdui-container mdui-center">
        <div class="mdui-row">
            <div class="mdui-col-sm-6 mdui-col-md-10 mdui-col-offset-lg-3">
                <div class="mdui-card">
                    <!-- 卡片头部，包含头像、标题、副标题 -->
                    <div class="mdui-card-header">
                        <img class="mdui-card-header-avatar"
                             src="http://mdui-aliyun.cdn.w3cbus.com/docs/assets/docs/img/avatar1.jpg"/>
                        <div class="mdui-card-header-title">[[${userInfo.userName}]]</div>
                        <div class="mdui-card-header-subtitle">cute</div>
                    </div>

                    <!-- 卡片的媒体内容，可以包含图片、视频等媒体内容，以及标题、副标题 -->
                    <div class="mdui-card-media" style="height: 320px">
                        <img src="http://mdui-aliyun.cdn.w3cbus.com/docs/assets/docs/img/card.jpg" style="height: 100%;"/>

                        <!-- 卡片中可以包含一个或多个菜单按钮 -->
                        <!--<div class="mdui-card-menu">-->
                            <!--<button class="mdui-btn mdui-btn-icon mdui-text-color-white"><i-->
                                    <!--class="mdui-icon material-icons">share</i></button>-->
                        <!--</div>-->
                    </div>

                    <!-- 卡片的标题和副标题 -->
                    <div class="mdui-card-primary">
                        <div class="mdui-card-primary-title">[[${userInfo.userName}]]</div>
                        <div class="mdui-card-primary-subtitle">修改密码</div>
                    </div>


                    <div class="mdui-card-content">
                        <form class="">
                            <div class="form-group">
                                <label class="" for="oldPassword">原密码</label>
                                <input type="type" class="form-control" id="oldPassword" placeholder="原密码">
                            </div>
                            <div class="form-group" style="">
                                <label class="" for="newPassword">新密码</label>
                                <input type="type" class="form-control" id="newPassword" placeholder="新密码">
                            </div>
                        </form>
                    </div>
                    <!-- 卡片的内容 -->
                    <!--<div class="mdui-card-content">-->
                        <!--<div class="mdui-textfield mdui-textfield-floating-label mdui-col-md-2">-->
                            <!--<label class="mdui-textfield-label">原密码</label>-->
                            <!--<input class="mdui-textfield-input" type="password"/>-->
                        <!--</div>-->
                        <!--<div class="mdui-textfield mdui-textfield-floating-label mdui-col-md-2">-->
                            <!--<label class="mdui-textfield-label">新密码</label>-->
                            <!--<input class="mdui-textfield-input" type="password"/>-->
                        <!--</div>-->
                    <!--</div>-->

                    <!-- 卡片的按钮 -->
                    <div class="mdui-card-actions">
                        <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-deep-purple mdui-m-r-5 mdui-m-b-2 mdui-float-right" onclick="saveUserInfo()">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        body{

        }
        .moon{
            display: none;
        }
    </style>
<script>
    function saveUserInfo(){
        var pwd = "[[${userInfo.password}]]";
        var newPwd = $("#newPassword").val();
        if(!newPwd){
            mdui.snackbar({
                message: '新密码不能为空！',
                buttonText: 'OK',
                timeout: '1000',
                onClose: function () {
                    $("#oldPassword").val("");
                    $("#newPassword").val("");
                    return;
                }
            });
            return;
        }
        var oldPassword = $("#oldPassword").val();
        if(oldPassword != pwd){
            mdui.snackbar({
                message: '原密码输入错误！',
                buttonText: 'OK',
                timeout: '1000',
                onClose: function () {
                    $("#oldPassword").val("");
                    $("#newPassword").val();
                    return;
                }
            });
            return;
        }
        $.ajax({
            type: 'GET',
            url: '/admin/changePWD',
            data: {
                userId:'[[${userInfo.userId}]]',
                password:newPwd
            },
            success: function (response) {
                console.log(response);
                mdui.snackbar({
                    message: response.status == 200 ? '修改密码成功！':'修改密码失败！',
                    buttonText: 'OK',
                    timeout: '1000',
                    onClose: function () {
                        $(".mdui-card-content").empty().append("<span style='margin: 186px;font-family: 楷体;font-size: 22px'>假如我年少有为知进退，才不会让你替我受罪</span>");
                        $(".mdui-btn").addClass("mdui-hidden");
                    }
                });
            }
        });

    }

</script>
</div>
</html>
